<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props的基本使用</title>
    <!-- 引入react引入核心库, 需要按顺序引入 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom, 用于支持react操作DOM -->
    <script type='text/javascript' src='../js/react-dom.development.js'></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type='text/javascript' src='../js/babel.min.js'></script>
</head>
<body>
    <div id="test"></div>
    <div id="test2"></div>

    <script type="text/babel">
        // 1.定义一个Person组件
        class Person extends React.Component{
          render(){
              const {name,sex,age} = this.props
              return (
                  <ul>
                      <li>NAME: {name}</li>
                      <li>GENDER: {sex}</li>
                      <li>AGE: {age}</li>
                  </ul>
              )
          }
        }

        // 2.渲染组件到页面
        //（分别传递标签属性）
        ReactDOM.render(<Person name="老刘" sex="female" age="23" />,document.getElementById('test'))
        // ReactDOM.render(<Person name="老ZHANG" sex="male" age="22" />,document.getElementById('test2'))

        // （模拟一个服务器返回人的数据）
        const p1 = {
            name:'强哥',
            sex:'女',
            age: 19
        }

        // 批量传递标签属性
        ReactDOM.render(<Person {...p1}/>, document.getElementById('test2'))
        // console.log('%%%',{...p1});
        // 在jsx中可以使用展开语法展开一个对象，但是仅仅适用于传递标签属性
        
    </script>
</body>
</html>